var config = {
    content: [
        {
            type: 'column',
            content: [
                {
                    type: 'row',
                    height: 70,
                    content: [
                        {
                            type: 'column',
                            width: 15,
                            content: [
                                {

                                    type: 'component',
                                    componentName: 'HierarchyPanel',
                                    height: 75
                                },
                                {
                                    type: 'component',
                                    componentName: 'ControlPanel',
                                    height: 20
                                },

                            ]
                        },

                        {
                            type: 'component',
                            componentName: 'GamePanel',
                            width: 80
                        }, {
                            type: 'component',
                            componentName: 'InspectorPanel',
                            width: 15
                        }]
                },
                {
                    type: 'row',
                    height: 20,
                    content: [
                        {
                            type: 'component',
                            componentName: 'ResourcePanel',
                            height: 15,
                        }
                    ]
                }
            ]
        }
    ]
};

var myLayout = new GoldenLayout(config);
myLayout.registerComponent('HierarchyPanel', function (container, componentState) {
    container.getElement().html(`<div id="hierarchyPanel"   ></div>`);
});
myLayout.registerComponent('ControlPanel', function (container, componentState) {
    container.getElement().html(`<div id="controlPanel"  ></div>`);
});
myLayout.registerComponent('GamePanel', function (container, componentState) {
    container.getElement().html(`<div id="gamePanel"></div>`);
});
myLayout.registerComponent('InspectorPanel', function (container, componentState) {
    container.getElement().html(`<div id="inspectorPanel"></div>`);
});
myLayout.registerComponent('ResourcePanel', function (container, componentState) {
    container.getElement().html(`<div id="resourcePanel"   ></div>`);
});
myLayout.init();


const GameSize = { width: 1600, height: 1200 };
setTimeout(async () => {

    function loadText(url: string) {
        return new Promise<string>((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.onload = () => {
                resolve(xhr.responseText);
            }
            xhr.open('get', url);
            xhr.send();
        })
    }

    const gamePanel = document.getElementById('gamePanel');

    // gamePanel.style.height = "600px";
    gamePanel.style.overflow = "auto";
    gamePanel.style.width = "100%";

    // gamePanel.style.height = "150%";
    // gamePanel.style.width = "100%";
    
    gamePanel.style.display = "flex";

    const canvas = document.createElement('canvas');
    canvas.id = 'game';
    canvas.width = GameSize.width;
    canvas.height = GameSize.height;

    gamePanel.appendChild(canvas);




    const content = await loadText('config.json');
    window['configData'] = JSON.parse(content)
    const javascriptFiles = window['configData'].scripts;


    for (let item of javascriptFiles) {
        await loadScript(item);
    }

    const editorJavaScriptFiles = [
        "./libs/dat.gui/dat.gui.min.js",
        "./out/engine/editor-api.js",
        "./out/engine/editor-ui.js"
    ]

    for (let item of editorJavaScriptFiles) {
        await loadScript(item);
    }


}, 1000)


function loadScript(url: string) {
    return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.onload = () => resolve();
        script.src = url;
        document.body.appendChild(script)

    })
}

